<template>
  <RadioGroup
    v-model="selectedValue"
    vertical
    class="radio-group-wrap"
    :style="{ gap: itemGap + 'px' }"
  >
    <Radio v-for="(t, i) in model" :key="i" :label="t.value" :style="itemStyles">
      <div class="active-icon">
        <Icon v-if="selectedValue === t.value" type="md-checkmark" />
      </div>
      <span> </span>
      {{ t.name }}
    </Radio>
  </RadioGroup>
</template>

<script>
export default {
  name: "single-select",
  data() {
    return {
      selectedValue: "",
      itemHeight: 40,
      itemGap: 10,
      itemFontColor: "#fff",
      itemFontSize: 20,
      itemBackColor: "rgba(0,0,0,0.5)",
      model: [
          {
                "name": "北京"
              ,
                "value": 0
              
          },
          {
                "name": "上海"
              ,
                "value": 1
              
          },
          {
                "name": "石家庄"
              ,
                "value": 2
              
          },
          {
                "name": "乌鲁木齐"
              ,
                "value": 3
              
          }
      ],
    };
  },
  computed: {
    itemStyles() {
      return {
        marginRight: "0",
        padding: "10px",
        display: "flex",
        alignItems: "center",
        gap: "5px",
        height: this.itemHeight + "px",
        background: this.itemBackColor,
        fontSize: this.itemFontSize + "px",
        color: this.itemFontColor,
      };
    },
  },
  watch: {
    model: {
      handler(newVal) {
        if (newVal.length > 0) {
          this.selectedValue = newVal[0].value;
        } else {
          this.selectedValue = "";
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.radio-group-wrap ::v-deep {
  display: flex;
  flex-direction: column;

  .ivu-radio {
    display: none;
  }

  .active-icon {
    min-width: 1em;
    height: 100%;
    display: flex;
    place-content: center;
  }
}
</style>
